<template>
  <div>
    <div id="article" :key="index" v-for="(item, index) in userInfo">
      <div class="tt">
        <!-- 头像 -->
        <div class="hea">
          <div class="head">
            <img :src="head + item.image" />
          </div>
        </div>

        <!-- 内容 -->
        <div class="content">
          <!-- 昵称 -->
          <h3 class="nickname">{{ item.name }}</h3>
          <div class="use">
            <span class="date">{{ item.time }}</span
            ><span class="posi">来自 XXX</span>

            <p v-html="item.article.replace(/\n|\r\n/g, '<br>')"></p>

            <!-- 显示图片 -->
            <div class="use-img"></div>
            <div class="opinion">
              <div type="buttom" title="喜欢">
                <i
                  class="iconfont icon-aixin"
                  @click="iconaixin(index, $event)"
                ></i>
                <span>{{ item.love }}</span>
              </div>
              <div type="buttom" title="评论">
                <i
                  class="iconfont icon-pinglun1"
                  @click="pinglun(item.id, index)"
                ></i>
                <span>{{ item.comment }}</span>
              </div>
              <div type="buttom" title="收藏">
                <i class="iconfont icon-tongbushoucang"></i>
                <span>{{ item.collect }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 评论区 -->
      <div class="comment-area" v-if="p == index">
        <hr />
        <div class="area">
          <div class="img">
            <img :src="head + user.image" />
          </div>
          <!-- 评论框 -->
          <textarea
            id="textarea"
            autoHeight="true"
            v-if="p == index"
          ></textarea>
        </div>
        <!-- 评论发送按钮 -->
        <div class="comment-area-but">
          <button class="commBut" @click="commBut(item.id)">评论</button>
        </div>
        <hr />
        <div class="use-area">
          <div class="wbpro-list">
            <div class="list" :key="index" v-show="t == 0">
              <div class="listx" :key="lidex" v-for="(listx, lidex) in list">
                <div class="head">
                  <img :src="head + listx.image" />
                </div>
                <div class="reply">
                  <span class="name">{{ listx.name }}</span>
                  <span class="tex">:{{ listx.area }}</span>
                  <span class="data">时间</span>
                </div>
              </div>
            </div>

            <div class="unpl" v-if="t == 1">正在加载,请稍等...</div>
            <div class="unpl" v-else-if="t == 2">暂无评论</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 数据监管
import userInfos from "@/store/user/userInfo";
// 网络请求封装
import { request } from "@/network/request";
// import qs from "qs";
// 自定义 “弹出框”
import prompt from "common/prompt/prompt";

export default {
  data() {
    return {
      length: null,
      userInfo: [],
      // ts: ["123"],
      // 图片地址
      width: [],
      // 点赞功能
      iconAixin: 0,
      // 显示隐藏 评论区 与 创建销毁 评论框
      p: -1,
      // 正在加载，请稍后...
      t: null,
      // 评论列表
    };
  },
  setup() {
    let { user, list, h, head, add, listx } = userInfos();
    return {
      user,
      list,
      h,
      head,
      add,
      listx,
    };
  },
  methods: {
    iconaixin(index, e) {
      if (e.target.className == "iconfont icon-aixin") {
        e.target.classList.remove("icon-aixin");
        e.target.classList.add("icon-aixin_shixin");
        this.userInfo[0].love++;
      } else {
        e.target.classList.add("icon-aixin");
        e.target.classList.remove("icon-aixin_shixin");
        this.userInfo[0].love--;
      }
    },
    // 获取评论 ----------------------------------------------------------------
    pinglun(id, index) {
      if (this.p == index) return (this.p = -1);

      this.p = index;
      this.t = 1;

      request({
        url: "/pinglun",
        params: id,
      })
        .then((res) => {
          if (res == "0") {
            this.t = 2;
          } else {
            this.listx(res);
            this.t = 0;
          }
        })
        .catch((err) => {});

      // textarea 窗口自适应
      $(document).ready(() => {
        function makeExpandingArea(el) {
          var setStyle = function (el) {
            el.style.height = "auto";
            el.style.height = el.scrollHeight - 25 + "px";
            $(".comment-area-but").css(
              "margin-top",
              el.scrollHeight - 35 + "px"
            );
            $("#article").css("padding-bottom", el.scrollHeight - 25 + "px");
          };
          var delayedResize = function (el) {
            window.setTimeout(function () {
              setStyle(el);
            }, 0);
          };
          if (el.addEventListener) {
            el.addEventListener(
              "input",
              function () {
                setStyle(el);
              },
              false
            );
            setStyle(el);
          } else if (el.attachEvent) {
            el.attachEvent("onpropertychange", function () {
              setStyle(el);
            });
            setStyle(el);
          }
          if (window.VBArray && window.addEventListener) {
            //IE9
            el.attachEvent("onkeydown", function () {
              var key = window.event.keyCode;
              if (key == 8 || key == 46) delayedResize(el);
            });
            el.attachEvent("oncut", function () {
              delayedResize(el);
            }); //处理粘贴
          }
        }
        makeExpandingArea(textarea);
      });
    },
    // 发送评论 ----------------------------------------------------------------
    commBut(id) {
      let textarea = $("#textarea");
      if (textarea.val() == "") return alert("不可为空");
      let user = this.user;
      let data = {
        onid: id,
        identity: user.identity,
        image: user.image,
        name: user.name,
        area: textarea.val(),
      };
      console.log(data);
      request({
        url: "/sendcomments",
        params: data,
      }).then((res) => {
        prompt.su(".dr", "评论成功");
      });
    },
  },
  created() {
    $(document).ready(() => {
      let img = [];
      let img1 = [];

      // 获取评论信息
      request({
        url: "articleout",
      })
        .then((res) => {
          res = res.reverse();
          for (let i in res) {
            if (res[i].img != null) {
              img[i] = res[i].img.split(",");
              img1[i] = [];
              for (let j = 0; j <= img[i].length - 2; j++) {
                img1[i][j] = img[i][j];
              }
            } else {
              img1[i] = "";
            }
          }

          for (let i in img1) {
            res[i].img = img1[i];
            this.userInfo[i] = res[i];
            this.width[i] = this.userInfo[i].img.length;
          }
        })
        .catch(() => {});

      let tiem = setInterval((a) => {
        // console.log(i++);
        let useimg = $(".use-img");
        if ($(".use-img").length > 0) {
          clearInterval(tiem);
          for (let i = 0; i <= useimg.length - 1; i++) {
            // console.log("i:" + i);
            for (let j = 0; j <= this.userInfo[i].img.length - 1; j++) {
              // console.log("j:" + j);
              useimg.eq(i).prepend(
                `<span class="img3">
                    <img src="${this.h}${this.userInfo[i].img[j]}" >
                  </span>`
              );
            }
            useimg.eq(i).children().height(useimg.eq(i).children().width());
          }
        }

        $(window).resize(() => {
          for (let i = 0; i <= useimg.length - 1; i++) {
            useimg.eq(i).children().height(useimg.eq(i).children().width());
          }
        });
      });

      // textarea
      let area = setInterval(() => {
        if ($("#textarea").length > 0) {
          function makeExpandingArea(el) {
            var setStyle = function (el) {
              el.style.height = "auto";
              el.style.height = el.scrollHeight - 25 + "px";
              $(".comment-area-but").css(
                "margin-top",
                el.scrollHeight - 35 + "px"
              );
              $("#article").css("padding-bottom", el.scrollHeight - 25 + "px");
            };
            var delayedResize = function (el) {
              window.setTimeout(function () {
                setStyle(el);
              }, 0);
            };
            if (el.addEventListener) {
              el.addEventListener(
                "input",
                function () {
                  setStyle(el);
                },
                false
              );
              setStyle(el);
            } else if (el.attachEvent) {
              el.attachEvent("onpropertychange", function () {
                setStyle(el);
              });
              setStyle(el);
            }
            if (window.VBArray && window.addEventListener) {
              //IE9
              el.attachEvent("onkeydown", function () {
                var key = window.event.keyCode;
                if (key == 8 || key == 46) delayedResize(el);
              });
              el.attachEvent("oncut", function () {
                delayedResize(el);
              }); //处理粘贴
            }
          }
          makeExpandingArea(textarea);
          // console.log(scrol);
          clearInterval(area);
        }
      });
    });
  },
};
</script>
<style scoped>
@import url("./article.css");
</style>
